<template>
    <template v-if="station">
        <a-descriptions :column="3">
            <a-descriptions-item label="名称">{{ station.name }}</a-descriptions-item>
            <a-descriptions-item label="总收入">{{ station.totalChargeAmount }}元</a-descriptions-item>
            <a-descriptions-item label="总充电订单数">{{ station.totalChargeOrderCount }}笔</a-descriptions-item>
            <a-descriptions-item label="总耗电量">{{ station.totalChargeKwh }}度</a-descriptions-item>
            <a-descriptions-item label="总充电时间">{{ formatChargeTime(station.totalChargeTime) }}</a-descriptions-item>
            <a-descriptions-item label="地址">{{ station.address }}</a-descriptions-item>
            <a-descriptions-item label="标签" :span="3">{{ station.labels ? station.labels.join(',') : '' }}</a-descriptions-item>
            <a-descriptions-item label="描述" :span="3">{{ station.desc }}</a-descriptions-item>
            <a-descriptions-item label="图片" :span="3">
                <template v-if="station.pics">
                    <a-span>
                        <BNetImg v-for="(pic, i) in station.pics" :key="i" :width="80" :src="pic" />
                    </a-span>
                </template>
            </a-descriptions-item>
        </a-descriptions>
    </template>
    <a-spin v-else size="large" />
</template>

<script lang="ts" setup>
    import { infoApi } from '@/api/ChargingStation';
import { formatChargeTime } from '@/utils';
import { ref } from 'vue';

    const props = defineProps<{
        stationId:number
    }>()

    const station = ref<any>()

    infoApi(props.stationId).then(r => {
        station.value = r.data
    })
</script>